<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件例子</title>
    <script src="jQuery/jquery-1.11.3.js"></script>
    <style>
        a{
            display: inline-block;
            width: 30px;
            height: 20px;
            padding: 10px;
            border: 1px solid blue;
        }
        .on{
            background-color: #00c2de;
            color: white;
        }
    </style>
</head>
<body>
    <a href="#" class="on">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <script>
       $(function () {
           $('a').on('mouseover',function () {
               $('a').removeClass('on');
               $(this).addClass('on')
           })
       })
    </script>
</body>
</html>